<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head th:replace="layout::common_head(~{::title}, ~{::supplement})">
    <meta charset="UTF-8">
    <title>监控视图</title>
    <script src="../static/js/jquery-3.2.1.min.js" th:src="@{js/jquery-3.2.1.min.js}"></script>
    <script src="../static/js/semantic.js" th:src="@{js/semantic.js}"></script>
    <link rel="stylesheet" href="../static/css/semantic.css" th:href="@{/css/semantic.css}"/>
    <link rel="stylesheet" href="../static/css/icon.css" th:href="@{css/icon.css}"/>
    <link href="../static/css/ionicons.min.css" rel="stylesheet" th:href="@{css/ionicons.min.css}"/>
    <link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
    <link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
    <link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>
    <th:block th:fragment="supplement">
        <!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=0"></script>-->
        <script src="../static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
        <script src="../static/js/jstree.min.js" th:src="@{js/jstree.min.js}"></script>
        <link rel="stylesheet" href="../static/css/jstree-default/style.min.css"
              th:href="@{css/jstree-default/style.min.css}">
        <style type="text/css">
            .ui.table.dataTable thead th {
                border-left: 0px;
            }
            /*原生button 有个下外边距*/
            .ui.modal .actions > .button {
                margin-bottom: 0;
            }
            /*原生dropdown 边距宽*/
            .ui.selection.dropdown {
                padding-top: 0.6em;
                max-height: 2.4em;
                min-height: 2.4em
            }
        </style>
    </th:block>
</head>
<body>
<!--header start-->
<div id="contextWrap">
    <!--sidebar-->
    <div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
         th:replace="layout::left_menu">
        <a class="item logo" href="#">
            <img src="../static/images/logo.png" th:src="@{images/logo.png}" alt="whstone"/><img
                src="../static/images/thumblogo.png" th:src="@{images/thumblogo.png}" alt="whstone"
                class="displaynone"/>
        </a>
        <div class="ui accordion inverted">
            <div class="title item">
                <i class="ion-speedometer titleIcon icon"></i>仪表盘
            </div>
            <div class="content">
                <a class="item" href="#" th:href="@{/dashboard}">仪表盘</a>
            </div>
            <div class="title item" href="#">
                <i class="ion-ios-world titleIcon  icon"></i>业务概览
            </div>
            <div class="content">
            </div>
            <div class="title item">
                <i class="ion-mouse titleIcon icon"></i>设备监控<i class="dropdown icon"></i>
            </div>
            <div class="content">
                <a class="item" href="#" th:href="@{/overview}">设备总览</a>
                <a class="item" href="#">设备详情</a>
            </div>
            <div class="title item" href="#">
                <i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
            </div>
            <div class="content">
            </div>
            <div class="title item">
                <i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
            </div>
            <div class="content">
                <a class="item" href="#">告警日历</a>
                <a class="item" href="#">告警列表</a>
            </div>
            <div class="title item" href="#">
                <i class="ion-briefcase titleIcon icon"></i>报表统计
            </div>
            <div class="content">
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>仪表盘1</span>
            <i class="ion-speedometer icon"></i>
            <div class="menu">
                <div class="header">
                    仪表盘1
                </div>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>业务概览</span>
            <i class="ion-ios-world icon"></i>
            <div class="menu">
                <div class="header">
                    业务概览
                </div>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>设备监控</span>
            <i class="ion-mouse icon"></i>
            <div class="menu">
                <div class="header">
                    设备监控
                </div>
                <div class="ui divider"></div>
                <a class="item" href="tab.html">设备总览</a>
                <a class="item" href="table.html">设备详情</a>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>视图展示</span>
            <i class="ion-arrow-graph-up-right icon"></i>
            <div class="menu">
                <div class="header">
                    视图展示
                </div>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>告警展示</span>
            <i class="ion-paintbrush icon"></i>
            <div class="menu">
                <div class="header">
                    告警展示
                </div>
                <div class="ui divider"></div>
                <a class="item" href="error.html">告警日历</a>
                <a class="item" href="error.html">告警列表</a>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>报表统计</span>
            <a href="error.html">
                <i class="ion-briefcase icon"></i>
            </a>
        </div>

        <div class="ui divider"></div>

    </div>

    <!--sidebar-->

    <div class="pusher">
        <!--navbar-->
        <div class="navslide navwrap" th:replace="layout::top_nav">
            <div class="ui menu icon borderless grid" data-color="inverted white">
                <a class="item labeled openbtn">
                    <i class="ion-navicon-round big icon"></i>
                </a>
                <div class="item ui colhidden">
                    <div class="ui icon input">
                        <input type="text" placeholder="Search...">
                        <i class="search icon"></i>
                    </div>
                </div>
                <div class="right menu colhidden">
                    <div class="ui dropdown item labeled icon">
                        <i class="bell icon"></i> 告警
                        <div class="ui red label mini circular">6</div>
                        <div class="menu">
                            <div class="header">
                                紧急告警
                            </div>
                            <div class="item">
                                告警信息1……
                                <div class="ui teal left pointing label">1</div>
                            </div>
                            <div class="item">
                                告警信息2……
                                <div class="ui label">51</div>
                            </div>
                            <div class="item">
                                告警信息3……
                                <div class="ui label">1</div>
                            </div>
                            <div class="header">
                                严重告警
                            </div>
                            <div class="item">
                                <i class="dropdown icon"></i>
                                <span class="text">更多</span>
                                <div class="menu">
                                    <div class="item">告警信息……</div>
                                    <div class="item">告警信息……</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui dropdown item">
                        <img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
                             alt="label-image"/>
                        <div class="menu">
                            <a class="item" href="#" th:text="${session.userInfo.name}">whstone</a>
                            <a class="item" href="mail.html" th:href="@{/logout}">注销</a>
                        </div>
                    </div>
                    <a class="item labeled rightsidebar computer only">
                        <i class="ion-wrench large icon"></i>工具
                    </a>

                </div>
            </div>
        </div>
        <!--navbar-->
        <!--maincontent-->
        <div class="mainWrap navslide">
            <div class="ui equal width left aligned padded grid stackable">
                <!--Site Content-->
                <div class="sixteen wide column">
                    <div class="header item">
                        <h2><i class="large photo icon"></i>监控视图</h2>
                    </div>
                    <div class="ui grid" style="padding-top:1rem">
                        <div class="eight wide column"  style="padding-bottom: 0px">
                            <div id="viewtype_select" class="ui selection dropdown">
                                <i class="dropdown icon"></i>
                                <div class="text">状态统计</div>
                                <div class="menu" id="viewtype_menu">

                                </div>
                            </div>
                            <div id="viewpage_select" class="ui selection dropdown">
                                <!--<input type="hidden" name="hosts">-->
                                <i class="dropdown icon"></i>
                                <div class="text"></div>
                                <div class="menu"  id="viewpage_menu">
                                    <div class="selected item" data-value="host"></div>
                                    <div class="item" data-value="platform"></div>
                                    <div class="item" data-value="all"></div>
                                </div>
                            </div>
                        </div>
                        <div class="eight wide column right aligned"  style="padding-bottom: 0px">
                            <button class="ui blue button addpage"><i class="add icon"></i>添加</button>
                            <button class="ui blue button editpage"><i class="edit icon"></i>编辑</button>
                            <button class="ui blue button deletepage"><i class="trash icon"></i>删除</button>
                        </div>
                    </div>

                    <div class="ui segment" id="statepie" style=" min-height : 470px;"  data-type="statepie">
                        <!--<h3>状态统计</h3>-->
                        <div class="ui grid">
                            <div class="eight wide column">
                                <div id="host_pie" style="height: 400px">
                                </div>
                            </div>
                            <div class="eight wide column">
                                <div id="point_pie" style="height: 400px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui segment" id="problems" style=" min-height : 470px;">
                        <!--<h3>问题视图</h3>-->
                        <table  id="problemsTable" class="ui compact basic table center aligned " width="100%">
                        </table>
                    </div>
                    <div class="ui segment" id="appletree" style=" min-height : 470px;">
                        <!--<h3>苹果树</h3>-->
                    </div>
                </div>
                <!--Site Content-->
            </div>
        </div>
        <!--maincontent-->
        <!--添加页面弹出框 start-->
        <div class="ui tiny modal page">
            <i class="close icon"></i>
            <div class="header" id="modal_name">
                添加页面
            </div>
            <div class="ui content  center aligned basic segment no-padding">
                <form class="ui form">
                    <div class="required inline field " id="name_field">
                        <label style="padding-right: 28px;padding-left: 18px">页面名称</label>
                        <input type="text" id="page_name" placeholder="不能为空" style="width: 260px;">
                    </div>
                    <div class="ui horizontal basic segments " style="border: none;box-shadow:0px 0px;margin-top: -10px;margin-bottom: -10px">
                        <div class="ui basic segment" style="border: none">
                            <div class="required inline field" >
                                <label>选择设备</label>
                            </div>
                        </div>
                        <div class="ui basic segment" style="border: none;width: 250px;">
                            <div class="ui segment left aligned" id="hostTreeTitle" >
                                <div id="host_tree"></div>
                            </div>
                        </div>
                    </div>


                </form>
            </div>
            <div class="actions">
                <div class="ui cancel button">取消</div>
                <div class="ui green approve submit button">确认</div>
            </div>
        </div>
         <!--删除页面弹出框 start-->
        <div th:fragment="delete_page" >
            <div  class="ui tiny modal"  id="deleteModal">
                <div class="ui icon header">
                    <i class="trash icon"></i>
                    确定删除吗？
                </div>
                <div class="actions">
                    <div class="ui cancel button">取消</div>
                    <div class="ui approve submit red button" data-tooltip="该操作无法恢复！">确认</div>
                </div>
            </div>
            <div class="ui mini modal"  id="backDeleteModal">
                <div class="ui icon header" id="deleteMsg">
                    <i class="green trash icon"></i>
                    删除成功
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:replace="layout::bottom_script(~{::specialScript})">
    <script src="../static/js/js.cookie.js" th:src="@{js/js.cookie.js}"></script>
    <script src="../static/js/jquery.nicescroll.min.js" th:src="@{js/jquery.nicescroll.min.js}"></script>
    <script data-pace-options='{ "ajax": false }' src="../static/js/pace.js" th:src="@{js/pace.js}"></script>
    <script src="../static/js/main.js" th:src="@{js/main.js}"></script>
    <th:block th:fragment="specialScript">
        <script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
        <script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
        <script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
        <script src="../static/js/custom/choose-hosts.js" th:src="@{js/custom/choose-hosts.js}"></script>
        <script>
            //定义echart图表
            var Color = ['#5FB878', '#F7B824', '#f11111','#d2d2d2', '#2F4056'];
            //设备pie
            var host_myChart = echarts.init(document.getElementById('host_pie'));
            var host_option={
                title: {
                    text: '0',
                    subtext: '台设备',
                    x: 'center',
                    y: 'center',
                    itemGap: 1,
                    textStyle: {
                        color: '#01AAED',
                        fontFamily: '微软雅黑',
                        fontSize: 24,
                        fontWeight: 'bolder'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    data:['正常','警告','严重'],
                },
                grid: {
                    left:'5%',
                    right:'5%',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '65%'],
                        selectedMode: '',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.name + param.value + "台" + ':\n' + Math.round(param.percent) + '%';
                                    },
                                    textStyle: {
                                        fontWeight: 'bolder'
                                    }
                                }
                            },
                        },
                        data:  [
                            {
                                "value": 0,
                                "name": "正常,"
                            },
                            {
                                "value": 0,
                                "name": "警告"
                            }
                        ],
                        color: Color
                    }
                ]
            };
            //host_myChart.setOption(host_option);
            //监控点pie
            var point_myChart = echarts.init(document.getElementById('point_pie'));
            var point_option = {
                title: {
                    text: '0',
                    subtext: '个监控点',
                    x: 'center',
                    y: 'center',
                    itemGap: 1,
                    textStyle: {
                        color: '#01AAED',
                        fontFamily: '微软雅黑',
                        fontSize: 24,
                        fontWeight: 'bolder'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    data:['正常','警告','严重'],
                },
                grid: {
                    left:'15%',
                    right:'15%',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '65%'],
                        selectedMode: '',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.name + param.value + "个" + ':\n' + Math.round(param.percent) + '%';
                                    },
                                    textStyle: {
                                        fontWeight: 'bolder'
                                    }
                                }
                            },
                        },
                        data:  [
                            {
                                "value": 0,
                                "name": "正常"
                            },
                            {
                                "value": 0,
                                "name": "警告"
                            }
                        ],
                        color: Color
                    }
                ]
            }
            ///point_myChart.setOption(point_option);

            //定义问题列表
            var problems_Table = $("#problemsTable").DataTable({
                "iDisplayLength": 5,
                order: [0, 'desc'],
                "createdRow": function (row, rowData) {
                    $('td', row).eq(1).addClass('left aligned');
                    $('td', row).eq(2).addClass('left aligned');
                    if (rowData.problem_state === '问题') {
                        if (rowData.priority_state === '警告') {
                            row.classList.add("warning")
                        } else if (rowData.priority_state === '严重') {
                            row.classList.add("negative")
                        } else {
                        }
                    }
                },
                columns: [
                    {
                        "data": "problem_time",
                        "width": "15%",
                        "title": "发生时间",
                        "orderable": false,
                    },
                    {
                        "data": "host_name",
                        "width": "10%",
                        "title": "设备",
                        "orderable": false,
                    },
                    {
                        "data": "description",
                        "width": "25%",
                        "title": "问题",
                        "orderable": false,

                    },
                    {
                        "data": "priority_state",
                        "width": "5%",
                        "title": "严重性",
                        "orderable": false

                    },
                    {
                        "data": 'problem_state',
                        "width": "15%",
                        "title": "状态",
                        "orderable": false,
                        render: function (data, type, row, meta) {
                            if (row.problem_state !== "问题") {
                                return '<div class="ui mini green label" style="margin-bottom: 0px" data-tooltip="恢复时间：' + row.recover_time + '" >' + row.problem_state + '</div>';
                            } else {
                                return '<div class="ui mini red label" style="margin-bottom: 0px">' + row.problem_state + '</div>';
                            }
                        }
                    },
                    {
                        "data": "duration_string",
                        "width": "10%",
                        "title": "持续时间",
                        "orderable": false
                    },
                    {
                        "data": "alert_state",
                        "width": "15%",
                        "title": "告警状态",
                        "orderable": false,
                    },
                    {
                        "data": "acknowledged",
                        "width": "5%",
                        "title": "确认",
                        "orderable": false,
                    }
                ],
            });

            //初始化选择树
            $('#host_tree').genHostTree({
                multi: true,
                initHosts: []

            })

            //初始化视图类型下拉框
            selectViewtype();

            //编辑页面弹出框
            $("button.editpage").on("click",function(){
                var type=$("#viewtype_select").dropdown("get value");
                var name=$("#viewpage_select").dropdown("get text");
                $("#name_field").removeClass("error");
                $("#hostTreeTitle").removeClass(" negative message");
                $("#modal_name").html("编辑页面【"+$("#viewtype_select").dropdown("get text")+"】")
                $("#page_name").val(name);
                if(name=="默认页面"){$("#name_field").addClass("disabled");}
                editpage(name,type);
            });

            //添加页面弹出框
            $("button.addpage").on("click",function(){
                $("#name_field").removeClass("error");
                $("#hostTreeTitle").removeClass(" negative message");
                $("#page_name").val("");
                $("#modal_name").html("添加页面【"+$("#viewtype_select").dropdown("get text")+"】");
                addpage();
            });

            //删除页面弹出框
            $("button.deletepage").on("click",function(){

                if($('#viewpage_menu').children('.item').length > 1) {

                    var type=$("#viewtype_select").dropdown("get value");
                    var name=$("#viewpage_select").dropdown("get text");
                    $("#deleteModal").modal({
                        onApprove: function () {

                            deletepage(name, type);

                        }
                    }).modal('setting', 'closable', false).modal('show');

                }else {
                    $("#backDeleteModal").modal({
                        inverted: true,
                        onShow:function () {
                            $('#deleteMsg').html("<i class='red trash icon'></i>最后一个页面不能删除！")
                        }
                    }).modal('show');
                    setTimeout("$('#backDeleteModal').modal('hide');",2000)
                }

            });

            function drawPage(type,name) {
                if(name !== '') {
                    //初始化状态视图
                    if(type === 'statepie') {
                        $.ajax({
                            type: "get",
                            url: "/view/get_graph?name="+name+"&type="+type,
                            dataType: "json",
                            success: function (result) {
                                if(result.success) {
                                    var data=result.data;
                                    getviewstatepie(data);
                                }
                                else {
                                    errorMsg_no_data(result.message);
                                }
                            },
                            error: function () {
                                errorMsg_no_connect("状态视图 Dropdown");
                            }
                        }).done(function () {
                            $('#viewtype_select, #viewpage_select').removeClass('loading disabled')
                        })
                        $("#statepie").show();
                        $("#problems").hide();
                        $("#appletree").hide();
                    }else if(type === 'problems') {
                        $.ajax({
                            type: 'get',
                            url: '/view/get_graph?name='+name+'&type='+type,
                            dataType: 'json',
                            success: function (result) {
                                if(result.success) {
                                    var problems = result.data;
                                    if(problems.length !== 0) {
                                        problems_Table.clear().rows.add(problems).draw();
                                    }

                                }
                                else {
                                    errorMsg_no_data(result.message);
                                }
                            },
                            error: function () {
                                errorMsg_no_connect('');
                            }
                        }).done(function () {
                            $('#viewtype_select, #viewpage_select').removeClass('loading disabled')
                        });
                        $("#statepie").hide();
                        $("#problems").show();
                        $("#appletree").hide();
                    }
                }
            }

            //获取视图类型下拉框
            function selectViewtype() {
                $.ajax({
                    type: "get",
                    url: "/viewtype/get_list",
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {

                            var data=result.data;
                            getselectViewtype(data);

                            $('#viewtype_select').dropdown({
                                onChange: function (value) {
                                    $('#viewtype_select').addClass('loading disabled');
                                    var type=value;
                                    selectViewpage(type);
                                }
                            })

                            $('#viewpage_select').dropdown({
                                onChange: function () {
                                    $('#viewpage_select').addClass('loading disabled');
                                    var type = $("#viewtype_select").dropdown("get value");
                                    var name = $("#viewpage_select").dropdown("get text");
                                    drawPage(type,name);
                                }
                            })

                            //初始化视图页面下拉框
                            var type=$("#viewtype_select").dropdown("get value");
                            selectViewpage(type);

                        } else {
                            errorMsg_no_data(result.message);
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("视图类型下拉框 Dropdown");
                    }
                })
            }
            function getselectViewtype(data) {
                var str = "";
                for(var i=0;i<data.length;i++)
                {
                    if (i==0){
                        str +="<div class='selected item' data-value='"+data[i].type+"'  >"+data[i].name+"</div> ";
                    }else if('appletree' === data[i].type)  {
                        str +="<div class='item disabled' data-value='"+data[i].type+"'  >"+data[i].name+"</div> ";
                    }else {
                        str +="<div class='item' data-value='"+data[i].type+"'  >"+data[i].name+"</div> ";
                    }
                }
                $("#viewtype_menu").html(str);
                $("#viewtype_select").dropdown("set text",data[0].name);
                $("#viewtype_select").dropdown("set value",data[0].type);
            }

            //获取视图页面下拉框
            function selectViewpage(type) {
                $.ajax({
                    type: "get",
                    url: "/view/get_names?type="+type,
                    dataType: "json",
                    success: function (result) {
                        if(result.success) {
                            var data=result.data;
                            getselectViewpage(data);
                        }
                        else {
                            errorMsg_no_data(result.message);
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("视图页面下拉框 Dropdown");
                    }
                })
            }
            function getselectViewpage() {
                var data = arguments[0];
                var default_value = arguments[1];
                var default_text = arguments[2];
                var str = "";
                for(var i=0;i<data.length;i++)
                {
                    str +="<div class='item' data-value='"+data[i].type+"'  >"+data[i].name+"</div> ";
                }

                $("#viewpage_menu").html(str);
                if(typeof default_value === 'undefined' || typeof default_text === 'undefined') {
                    $("#viewpage_select").dropdown("set text",data[data.length-1].name);
                    $("#viewpage_select").dropdown("set value",data[data.length-1].type);
                }else {
                    $("#viewpage_select").dropdown("set text",default_text);
                    $("#viewpage_select").dropdown("set value",default_value);
                }

            }

            function getviewstatepie(data) {
                var hostStateNum = data.hostStateNum;
                if (hostStateNum.stateNum) {
                    host_option.title.text = hostStateNum.totalNum;
                    host_option.series[0].data = hostStateNum.stateNum;
                    // 重写指定图表的配置项和数据
                    host_myChart.setOption(host_option);
                }
                var pointStateNum = data.pointStateNum;
                if (pointStateNum.stateNum) {
                    point_option.title.text = pointStateNum.totalNum;
                    point_option.series[0].data = pointStateNum.stateNum;
                    point_myChart.setOption(point_option);
                }
            }

            function addpage() {
                var hostIds = [];
                var $host_tree = $('#host_tree')

                $(".modal.page").modal({
                    onShow: function() {

                        $host_tree.genHostTree({
                            multi: true,
                            initHosts: []
                        })
                    },
                    onApprove: function () {
                        hostIds = $host_tree.jstree(true).get_bottom_checked();
                        //选择设备后，执行的操作
                        //验证是否为空
                        if($("#page_name").val()=="")
                        {
                            $("#name_field").addClass("error");
                            return false;
                        }else {
                            if(hostIds.length==0) {
                                $("#hostTreeTitle").addClass(" negative message");
                                return false;
                            }else {
                                var maxNum = 10;
                                var name = $("#page_name").val();
                                var type = $("#viewtype_select").dropdown("get value");
                                var send_data = {
                                    hostIds:hostIds,
                                    name:name,
                                    type:type};
                                if(type==''){type="statepie"}
                                if(type=="statepie"){
                                    $.ajax({
                                        type: "post",
                                        url: "/view/add_state",
                                        data:JSON.stringify(send_data),
                                        dataType: "json",
                                        contentType:'application/json;charset=UTF-8',
                                        success: function (result) {
                                            if (result.success) {
                                                var data = result.data;
                                                getviewstatepie(data);
                                                selectViewpage(type);
                                                $("#viewpage_select").dropdown('set text', name);
                                            } else {
                                                errorMsg_no_data(result.message);
                                            }
                                        },
                                        error: function () {
                                            errorMsg_no_connect("添加状态视图 add");
                                        }
                                    });
                                }
                                else if(type=="problems"){
//
                                    var send_data = {
                                        hostIds:hostIds,
                                        name:name,
                                        type:type,
                                        maxNum:maxNum};
                                    $.ajax({
                                        type: "post",
                                        url: '/view/add_problems',
                                        data:JSON.stringify(send_data),
                                        dataType: "json",
                                        contentType:'application/json;charset=UTF-8',
                                        success: function (result) {
                                            if(result.success) {
                                                var data=result.data;
                                                problems_Table.clear().rows.add(data).draw();
                                                selectViewpage(type);
                                                $("#viewpage_select").dropdown('set text', name);
                                            }
                                            else {
                                                errorMsg_no_data(result.message);
                                            }
                                        },
                                        error: function () {
                                            errorMsg_no_connect('');
                                        }
                                    })
                                    selectViewpage(type);
                                    $("#viewpage_select").dropdown('set text', name);
                                }
                            }
                        }
                    }
                }).modal('setting', 'closable', false).modal('show');

            }

            function editpage(name,type) {
                //获取问题视图的所选设备ids
                if(type==''){type="statepie"}
                if(type=="statepie") {
                    $.ajax({
                        type: "get",
                        url: "/stateview/get_hostids?name=" + name + "&type=" + type,
                        dataType: "json",
                        success: function (result) {
                            if (result.success) {
                                var data = result.data;
                                getedittree(data,name);
                            }
                            else {
                                errorMsg_no_data(result.message);
                            }
                        },
                        error: function () {
                            errorMsg_no_connect("编辑状态视图 Dropdown");
                        }
                    })
                }else if(type=="problems"){
                    $.ajax({
                        type: "get",
                        url: "/problemsview/get_hostids?name=" + name + "&type=" + type,
                        dataType: "json",
                        success: function (result) {
                            if (result.success) {
                                var data = result.data;
                                getedittree(data,name);
                            }
                            else {
                                errorMsg_no_data(result.message);
                            }
                        },
                        error: function () {
                            errorMsg_no_connect("编辑问题视图 Dropdown");
                        }
                    })
                }
            }
            function getedittree(data,name) {
                var hostIds = data;
                var $host_tree = $('#host_tree');
                $(".ui.modal.page").modal({
                    onShow: function() {
                        $host_tree.genHostTree({
                            multi: true,
                            initHosts: hostIds
                        })

                    },
                    onApprove: function () {
                        hostIds = $host_tree.jstree(true).get_bottom_checked()
                        //选择设备后，执行的操作
                        //验证是否为空
                        if($("#page_name").val()=="")
                        {
                            $("#name_field").addClass("error");
                            return false;
                        }else {
                            if(hostIds.length==0) {
                                $("#hostTreeTitle").addClass(" negative message");
                                return false;
                            }else {
                                var maxNum = 10;
                                var newName = $("#page_name").val();
                                var type = $("#viewtype_select").dropdown("get value");
                                if(type=="statepie"){
                                    var send_data = {
                                        hostIds:hostIds,
                                        newName:newName,
                                        oldName:name,
                                        type:type};
                                    $.ajax({
                                        type: "post",
                                        url: "/view/update_state",
                                        data:JSON.stringify(send_data),
                                        dataType: "json",
                                        contentType:'application/json;charset=UTF-8',
                                        success: function (result) {
                                            if (result.success) {
                                                var name_list = result.data;
                                                if(name_list.length !== 0) {
                                                    getselectViewpage(name_list,type,newName);

                                                }
                                            } else {
                                                errorMsg_no_data(result.message);
                                            }
                                        },
                                        error: function () {
                                            errorMsg_no_connect("添加状态视图 add");
                                        }
                                    });
                                }
                                else if(type=="problems"){
                                    var send_data = {
                                        hostIds:hostIds,
                                        newName:newName,
                                        oldName:name,
                                        type:type,
                                        maxNum:maxNum};
                                    $.ajax({
                                        type: "post",
                                        url: '/view/update_problems',
                                        data:JSON.stringify(send_data),
                                        dataType: "json",
                                        contentType:'application/json;charset=UTF-8',
                                        success: function (result) {
                                            if(result.success) {
                                                var name_list = result.data;
                                                if(data.length !== 0) {
                                                    getselectViewpage(name_list,type,newName);
                                                }
                                            }
                                            else {
                                                errorMsg_no_data(result.message);
                                            }
                                        },
                                        error: function () {
                                            errorMsg_no_connect('');
                                        }
                                    })

                                }
                            }
                        }
                    }
                }).modal('setting', 'closable', false).modal('show');

            }

            function deletepage(name,type) {
                $.ajax({
                    type: "get",
                    url: "/view/delete?name=" + name + "&type=" + type,
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            $("#backDeleteModal").modal({
                                inverted: true,
                                onShow:function () {
                                    $('#deleteMsg').html(' <i class="green trash icon"></i>删除成功');
                                }
                            }).modal('show');
                            setTimeout("$('#backDeleteModal').modal('hide');selectViewpage(type);",2000);

                        }
                        else {
                            errorMsg_no_data(result.message);
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("删除视图 Dropdown");
                    }
                })
            }

        </script>
    </th:block>
</th:block>

</body>
</html>